import React, { useEffect, useState } from 'react';
import styles from './checkindialog.module.css';
import icon_check_in_dialog_tips from '@/assets/icon_check_in_dialog_tips.png'
import icon_check_in_dialog_header from '@/assets/icon_check_in_dialog_header.png'
import { Mask, Toast } from 'antd-mobile';
import { LangThai } from '@/utils/langThai';
import { setTodayCheckDialogDidShow } from '@/utils/storage';


export default function CheckInDialog({ visible, onConfirm, income }) {

    const [needDisplay, setNeedDisplay] = useState(false);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangThai);

    //监听
    // useEffect(() => {
    //     setAddToHome(isHomeMode)
    //     setNeedDisplay(visible)
    // }, [])

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible]);

    // 触发添加操作
    const onHandleCheckInClick = () => {
        setTodayCheckDialogDidShow();
        onConfirm && onConfirm();
    };

    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className={styles.checkInDialogOverlayRoot}>
                <div className={styles.checkInDialogOverlayBg}>
                    <div className={styles.checkInDialogOverlayContent}>
                        <img className={styles.checkInDialogTipsIcon} src={icon_check_in_dialog_tips} alt='' />

                        <div className={styles.checkInDialogOverlayContentRowTitle}>{curLang.checkIn4}</div>
                        <div className={styles.checkInDialogOverlayContentRowDetail}>{curLang.checkIn5}</div>

                        <div className={styles.checkInDialogOverlayConfirm} onClick={() => { onHandleCheckInClick() }}>{curLang.checkIn2}{income} {curLang.checkIn21}</div>
                    </div>

                    <img className={styles.checkInDialogHeaderIcon} src={icon_check_in_dialog_header} alt='' />
                </div>
            </div>
        </Mask>
    );
};
